<!--
 * @Author: 王灿
 * @Date: 2019-12-23 22:14:42
 * @LastEditTime : 2019-12-23 22:37:33
 * @LastEditors  : Please set LastEditors
 * @Description: 门票核销
 * @FilePath: \scarlet-sparrow-admin\src\views\course\course-ticket\ticket-operate\index.vue
 -->

 <template>
  <div>
    <el-form>
      <!-- 校验码 -->
      <el-form-item>
        <el-row>
          <el-input :value="checkCode" readonly ></el-input>
        </el-row>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onRefresh">下一个</el-button>
      <el-button type="primary" @click="onSubmitForm">确 定</el-button>
      <el-button @click="onCancelForm">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { getCourseTicketUse } from '@/api/course.js'
export default {
  name: 'TicketOperate',
  props: {
    // 默认数据
    index: {
      type: Number,
      default: 0
    },
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      // 当前索引
      currIndex: 0,
      checkCode: ''
    }
  },
  watch: {
    currIndex() {
      this.checkCode = this.tableData[this.currIndex].checkCode
    }
  },
  created() {
    this.currIndex = this.index
    this.checkCode = this.tableData[this.currIndex].checkCode
  },
  methods: {
    // 提交
    onSubmitForm() {
      getCourseTicketUse({
        checkCode: this.checkCode
      }).then( () => {
        this.$message({
            type: 'success',
            message: '核销成功，进入下一个',
            duration: 1500,
            onClose: () => {
              this.onRefresh()
            }
          })
      })
    },
    // 取消
    onCancelForm() {
      let data = { isShow: false, isRefresh: false }
      this.$emit('onChangeRefresh', data)
    },
    // 核销成功
    onRefresh() {
      if (this.currIndex >= this.tableData.length - 1) {
        this.$message({
            type: 'error',
            message: '已到底',
            duration: 1500
          })
      } else {
        this.currIndex++
      }
    }
  }
}
</script>
